<template>
	<!-- 个人中心 页面 -->
	<view class="container">
		<view class="box">
			<view class="title">个人信息</view>
			<view class="header item">
				<view class="field-item">
					<text>头像</text>
					<image src="../../static/icon/chatgpt-icon.png" />
				</view>

				<view class="field-item">
					<text>用户名</text>
					<view>{{userInfo.username}}</view>
				</view>

				<view class="field-item">
					<text>邮箱</text>
					<view>{{userInfo.email}}</view>
				</view>

				<view class="field-item">
					<text>手机号</text>
					<view>{{userInfo.phone}}</view>
				</view>

				<view class="field-item">
					<text>会员等级</text>
					<view>{{userInfo.member}}</view>
				</view>

				<view class="field-item">
					<text>会员期限</text>
					<view>{{userInfo.expired}}</view>
					<view class="recharge" @click="gotoRechargePage">充值</view>
				</view>
			</view>

			<view class="title">订阅次数</view>
			<view class="Subscription">
				<view class="Subscription-field-item" v-for="item in model" :key="item.model">
					<view>{{item.value}}</view>
					<view style="font-size: smaller;">
						<text>每日可用</text>
						<text>剩余: {{item.count}}</text>
					</view>
					<view style="font-size: small; color: #555;">
						<text>重置倒计时</text>
						<text>{{time}}</text>
					</view>
				</view>
			</view>

			<view class="title">GPT模型</view>
			<view class="item">
				<uni-data-checkbox v-model="GPT_model" :localdata="model" selectedColor='#0B5BA5' @change='setModel' />
			</view>

			<view class="title">文件上传</view>
			<view class="fileupload item">
				<view class="upload" @click="fileChoose" />
				<view class="info">
					<view class="file">已选择的文件: {{tempFiles.name}}</view>
					<view class="tips">tips: 上传的文件需小于1M，文件格式限制为csv, txt, pdf, md, docx</view>
					<button v-if="tempFiles.name" size="mini" type="primary" @click="uploadFile">上传</button>
				</view>
			</view>

			<view class="btn">
				<view class="border" @click="back">返回聊天界面</view>
				<view @click="logout">退出登录</view>
			</view>
		</view>

		<uni-popup ref="message" type="message">
			<uni-popup-message :type="message.type" :message="message.message" :duration="2000" />
		</uni-popup>
	</view>
</template>

<script>
	import {
		getuserprofile
	} from '@/static/js/api.js'
	import {
		BASE_URL
	} from '@/static/js/config.js'
	export default {
		data() {
			return {
				time: 0,
				userInfo: {},
				message: {
					type: undefined,
					message: undefined
				},
				tempFiles: {},
				GPT_model: undefined,
				model: []
			};
		},
		onLoad() {
			this.countdown()
			this.getModel()
			this.userprofile()
		},
		methods: {
			messagePopUp(type, message) {
				this.message.type = type
				this.message.message = message
				this.$refs.message.open()
			},
			formatTime(timeInSeconds) {
				const hours = Math.floor(timeInSeconds / 3600);
				const minutes = Math.floor((timeInSeconds % 3600) / 60);
				const seconds = Math.floor(timeInSeconds % 60);
				const formattedHours = String(hours).padStart(2, '0');
				const formattedMinutes = String(minutes).padStart(2, '0');
				const formattedSeconds = String(seconds).padStart(2, '0');
				return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
			},
			countdownToMidnight() {
				const now = new Date();
				const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
				const timeToMidnight = Math.floor((tomorrow - now) / 1000);
				return this.formatTime(timeToMidnight);
			},
			userprofile() {
				getuserprofile().then(response => {
					if (response.code == 200) {
						this.userInfo = response.data
						Object.entries(response.data.count).forEach(([key, value]) => {
							this.model.push({text: key, value: key, count: value})
						});
					} else return this.messagePopUp('error', response.msg)
				})
			},
			countdown() {
				setInterval(() => {
					this.time = this.countdownToMidnight()
				}, 1000);
			},
			gotoRechargePage() {
				return this.messagePopUp('info', '暂不开放充值入口')
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				})
			},
			fileChoose() {
				uni.chooseFile({
					count: 1,
					extension: ['.csv', '.txt', '.pdf', '.md', '.docx', '.doc'],
					success: (res) => {
						const file = res.tempFiles[0]
						if (file.size > 1048576) return this.messagePopUp('error', '文件大小不得大于1M')
						else this.tempFiles = file
					}
				})
			},
			uploadFile() {
				uni.uploadFile({
					url: `${BASE_URL}uploadFile/`,
					header: {
						JSONWebToken: this.userInfo.token,
						userID: this.userInfo.info.userID
					},
					filePath: this.tempFiles.path,
					name: this.tempFiles.name,
					success: (uploadFileRes) => {
						const response = JSON.parse(uploadFileRes.data)
						if (response.code === 200) {
							this.tempFiles = []
							return this.messagePopUp('success', response.msg)
						}
						this.messagePopUp('error', response.msg)
					}
				});
			},
			getModel() {
				this.GPT_model = uni.getStorageSync('model') || 'gpt-3.5-turbo'
			},
			setModel(e) {
				uni.setStorageSync('model', e.detail.value)
			},
			back() {
				uni.navigateBack()
			},
			logout() {
				uni.removeStorageSync('user');
				this.messagePopUp('success', '退出登录')
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 2000)
			}
		},
	}
</script>

<style lang="scss" scoped>
	$bg: rgba(255, 255, 255, .5);
	$shadow-base: 0 0 10px rgba($color: #fff, $alpha: 0.5);
	$spacing-medium: 8px;
	$shadow-light: rgba(0, 0, 0, .03);
	$border-radius-medium: 12px;
	$margin-bottom: 20px;

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box {
		height: 100%;
		width: 90%;
		max-width: 768px;
		padding: 20px 10px;
		background-color: $bg;
		overflow: auto;
	}

	.title {
		color: #555;
		padding-bottom: 10px;
		font-size: 12px;
		letter-spacing: 3px;
		margin-top: $margin-bottom;
	}

	.item {
		background-color: rgba(0, 0, 0, .03);
		box-shadow: $shadow-base;
		border-radius: $border-radius-medium;
		padding: 10px;
	}

	.field-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		position: relative;
	}

	.header {
		text {
			width: 4em;
			text-align: center;
			text-align-last: justify;
			margin-right: $margin-bottom;
		}

		image {
			height: 50px;
			width: 50px;
			border-radius: 50%;
		}

		.recharge {
			position: absolute;
			right: 5%;
			color: #0B5BA5;

			&:hover {
				color: #FF6600;
				text-decoration: underline;
			}
		}
	}

	.Subscription {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: $spacing-medium;
		gap: $spacing-medium;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}

		.Subscription-field-item {
			box-shadow: $shadow-base;
			border-radius: $border-radius-medium;
			padding: 15px;

			view {
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
			}
		}
	}

	.fileupload {
		padding: 30px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: $spacing-medium;
		gap: $spacing-medium;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;

			.info {
				margin-top: 10px;
			}
		}

		.upload {
			border: 1px dotted #222;
			height: 100px;
			width: 100px;
			border-radius: 10px;
			margin-right: 10px;

			&:empty::before {
				content: '+';
				width: 100%;
				height: 100%;
				color: #555;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: xx-large;
			}
		}

		.file {
			margin-bottom: 5px;
		}

		.tips {
			color: #555;
			font-size: x-small;
		}

		button {
			margin-top: 5px;
		}

	}

	.btn {
		margin-top: $margin-bottom;
		border-radius: $border-radius-medium;
		box-shadow: $shadow-base;
		color: #0B5BA5;

		view {
			margin: 0 16px;
			padding: 12px 0;

			&:hover {
				color: #FF6600;
				text-decoration: underline;
			}
		}

		.border {
			border-bottom: 1px solid rgba(255, 255, 255, .5);
		}
	}
</style>